<template>
	<div class="top-sale-wrap">
		<van-tabs v-model:active="timeSlot" shrink animated>
			<van-tab title="近7天" name="近7天">
				<div class="goods-list block" v-if="topSale7DayList&&topSale7DayList.length>0">
					<top-sale-item v-for="(item,index) in topSale7DayList" key="index" :goods="item" :index="index+1"/>
				</div>
				<div class="top-sale-empty" v-else>暂无榜单</div>
			</van-tab>
			<van-tab title="近30天" name="近30天">
				<div class="goods-list block" v-if="topSale30DayList&&topSale30DayList.length>0">
					<top-sale-item v-for="(item,index) in topSale30DayList" key="index" :goods="item" :index="index+1"/>
				</div>
				<div class="top-sale-empty" v-else>暂无榜单</div>
			</van-tab>
			<van-tab title="近3月" name="近3月">
				<div class="goods-list block" v-if="topSale3MonthList&&topSale3MonthList.length>0">
					<top-sale-item v-for="(item,index) in topSale3MonthList" key="index" :goods="item" :index="index+1"/>
				</div>
				<div class="top-sale-empty" v-else>暂无榜单</div>
			</van-tab>
			<template #nav-left>
				<div class="nav-left">
					<van-icon name="medal" class="font-16 txt-primary"/>
				<van-popover v-model:show="showPopover" :actions="saleTypeList" @select="onSelectType" class="popover-short-width">
					<template #reference>
						<div><b>{{saleTypeText}}</b><van-icon name="arrow-down"/></div>
					</template>
				</van-popover>
				</div>
			</template>
			<template #nav-right><div class="nav-right" @click="showBrand=true"><div>{{saleBrandText}}<van-icon name="arrow"/></div></div></template>
		</van-tabs>
		<van-popup v-model:show="showBrand" teleport="#app" position="right" class="drawer-aside" @close="reload">
			<div class="main-wrap">
				<van-index-bar :index-list="indexList">
					<template v-for="group in brandCopy" key="group.label">
						<van-index-anchor :index="group.label">{{group.label}}</van-index-anchor>
						<van-cell v-for="item in group.options" key="item.value" :title="item.label" is-link @click="onSelectSaleBrand(item)">
							<template #right-icon>
								<div class="right-icon">
									<van-icon v-if="item.label===saleBrandText" name="checked" class="txt-primary"/>
									<van-icon v-else name="circle" color="var(--font-third-color)"/>
								</div>
							</template>
						</van-cell>
					</template>
				</van-index-bar>
			</div>
			<div class="drawer-btn">
				<van-button type="warning" block class="button-first" @click="resetSaleBrand">重置</van-button>
				<van-button type="primary" block class="button-last" :color="themeColor" @click="showBrand=false">完成</van-button>
			</div>
		</van-popup>
	</div>
	<!--暂无榜单-->
</template>
<style lang="scss" scoped>
.top-sale-wrap{
	--van-primary-color:v-bind(themeColor);
	--van-tabs-line-height:28px;
	margin-top:16px;
	:deep(.van-tab){
		background:var(--white-color);
		height:28px;width:56px;
		font-size:12px;
		line-height:1;
	}
	:deep(.van-tab:nth-of-type(2)){
		border-bottom-left-radius: 20px;
		border-top-left-radius: 20px;
	}
	:deep(.van-tab:nth-of-type(4)){
		border-top-right-radius: 20px;
		border-bottom-right-radius: 20px;
	}
	:deep(.van-tabs__nav--shrink){
		padding-left:0; padding-right:0;
	}
	:deep(.van-tabs__nav--line){padding-bottom:0;}
	:deep(.van-tab--active){
		font-weight:normal!important;
		color:var(--van-primary-color);
	}
	:deep(.van-tabs__line){
		opacity: .2;height:24px;bottom:auto;left:0;border-radius:18px;top:2px;
		width:52px;
	}
	.nav-left,.nav-right{
		display:flex; align-items:center;height:28px;
	}
	.nav-left{
		margin:0 5px 0 10px;font-size:14px;
		div .van-icon{font-size:12px; margin-left:3px;color:var(--font-disable-color);}
	}
	.nav-right{
		margin:0 10px; flex:1; margin-left:auto; justify-content:flex-end; font-size:12px;
		color:var(--font-third-color); overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
		transform: scale(.9);transform-origin:100% center;
		div .van-icon{font-size:12px;color:var(--font-disable-color);}
	}

	.top-sale-empty{
		height:60px; border-radius:8px;margin:10px;color:var(--font-disable-color);
		display: flex; align-items: center; justify-content: center; background-color:var(--white-color);

	}
	.goods-list{margin-right:5px;}
}
.drawer-aside{
	.main-wrap{
		height:calc(100vh - 50px); margin-top:-1px;
		:deep(.van-index-anchor--sticky){left:0!important}
		:deep(.van-cell--clickable){padding-right:32px;}
		.right-icon{
			display:flex;align-items: center;
			.van-icon{font-size:18px;}
		}
	}
}
</style>
<script lang="ts" setup>
//店内Top10销量商品

//props
const props=defineProps({
	themeColor:{
		type:String,
		required:false,
		default:import.meta.env.VITE_THEME_COLOR
	},
	shopId:{
		type:String,
		required:true,
	},
})

//data
const isLoading=ref([false,false,false]) //top10列表是否正在查询中未返回数据？ 初始默认应为true
const timeSlot = ref<'近7天'|'近30天'|'近3个月'>('近7天')  //时间范围

const showPopover=ref(false)
const saleType=ref(1)//筛选类型
const saleTypeText=ref('提货榜')
const saleTypeList=reactive([
	{key:1,text:'提货榜',},
	{key:2,text:'办理榜',},
])

const showBrand=ref(false)
const saleBrand=ref('')   //品牌查询条件
const saleBrandText=ref('全部品牌')
const indexList:string[]=[]
// const saleBrandGroup=ref(<Array<any>>[])   //品牌筛选列表，默认“店内所有品牌”
const brandCopy=[//用text来做显示；label是提供给筛选用的拼音
	{
		label: '#',
		options:[
			{value:'11',label:'360', pinyin:'360#',},
			{value:'12',label:'8848', pinyin:'8848#',},
		],
	},
	{
		label: 'L',
		options:[
			{value:'31',label:'联想（LENOVO）', pinyin:'lianxiaong',},
		],
	},
	{
		label: 'H',
		options:[
			{value:'41',label:'华为（HUAWEI）', pinyin:'huawei',},
			{value:'42',label:'华硕（ASUS）', pinyin:'huasou', },
			{value:'43',label:'华米（Amazfit）', pinyin:'huami',},
		],
	},
	{
		label: 'R',
		options:[
			{value:'51',label:'荣耀（HONOR）', pinyin:'rongyao',},
		],
	},
	{
		label: 'P',
		options:[
			{value:'61',label:'苹果（APPLE）', pinyin:'pingguo apple',},
		],
	}
]
//todo:读取品牌列表后，将首字母加入索引列表中
for(let g of brandCopy){
	indexList.push(g.label)
}
// saleBrandGroup.value=brandCopy

const topSale7DayList = ref(<Array<any>>[])
const topSale30DayList = ref(<Array<any>>[])
const topSale3MonthList = ref(<Array<any>>[])
topSale7DayList.value=([
	{
		gdsId:'1227867',
		gdsImg:'https://www.woego.cn/woego/image/622aaf5a75e50b69f7a2b40d_140x140!.jpg',
		gdsName:'Apple iPhone 13 Pro Max',
		agentPrice:530000,
		guidePrice:580000,
		saleAmount:599,
	},
	{
		gdsId:'1227867',
		gdsImg:'https://www.woego.cn/woego/image/622aaf5a75e50b69f7a2b40d_140x140!.jpg',
		gdsName:'Apple iPhone 13 Pro Max',
		agentPrice:530000,
		guidePrice:580000,
		saleAmount:599,
	},
	{
		gdsId:'1227867',
		gdsImg:'https://www.woego.cn/woego/image/622aaf5a75e50b69f7a2b40d_140x140!.jpg',
		gdsName:'Apple iPhone 13 Pro Max',
		agentPrice:530000,
		guidePrice:580000,
		saleAmount:599,
	},
	{
		gdsId:'1227867',
		gdsImg:'https://www.woego.cn/woego/image/622aaf5a75e50b69f7a2b40d_140x140!.jpg',
		gdsName:'Apple iPhone 13 Pro Max',
		agentPrice:530000,
		guidePrice:580000,
		saleAmount:599,
	},
	{
		gdsId:'1227867',
		gdsImg:'https://www.woego.cn/woego/image/622aaf5a75e50b69f7a2b40d_140x140!.jpg',
		gdsName:'Apple iPhone 13 Pro Max',
		agentPrice:530000,
		guidePrice:580000,
		saleAmount:599,
	},
	{
		gdsId:'1254266',
		gdsImg:'https:www.woego.cn/woego/image/6449d39e2b608d0a734b9585_140x140!.jpg',
		gdsName:'小象智能家庭医生 小象智能家庭医生',
		agentPrice:43000,
		guidePrice:48000,
		saleAmount:599,
	},
	{
		gdsId:'1254266',
		gdsImg:'https:www.woego.cn/woego/image/6449d39e2b608d0a734b9585_140x140!.jpg',
		gdsName:'小象智能家庭医生',
		agentPrice:43000,
		guidePrice:48000,
		saleAmount:599,
	},
	{
		gdsId:'1254266',
		gdsImg:'https:www.woego.cn/woego/image/6449d39e2b608d0a734b9585_140x140!.jpg',
		gdsName:'小象智能家庭医生',
		agentPrice:43000,
		guidePrice:48000,
		saleAmount:599,
	},
	{
		gdsId:'1254266',
		gdsImg:'https:www.woego.cn/woego/image/6449d39e2b608d0a734b9585_140x140!.jpg',
		gdsName:'小象智能家庭医生 小象智能家庭医生小象智能家庭医生',
		agentPrice:43000,
		guidePrice:48000,
		saleAmount:599,
	},
	{
		gdsId:'1254266',
		gdsImg:'https:www.woego.cn/woego/image/6449d39e2b608d0a734b9585_140x140!.jpg',
		gdsName:'小象智能家庭医生',
		agentPrice:43000,
		guidePrice:48000,
		saleAmount:599,
	},
])
topSale30DayList.value=([
	{
		gdsId:'1227867',
		gdsImg:'https://www.woego.cn/woego/image/622aaf5a75e50b69f7a2b40d_140x140!.jpg',
		gdsName:'Apple iPhone 13 Pro Max',
		agentPrice:530000,
		guidePrice:580000,
		saleAmount:599,
	},
	{
		gdsId:'1227867',
		gdsImg:'https://www.woego.cn/woego/image/622aaf5a75e50b69f7a2b40d_140x140!.jpg',
		gdsName:'Apple iPhone 13 Pro Max',
		agentPrice:530000,
		guidePrice:580000,
		saleAmount:599,
	},
	{
		gdsId:'1227867',
		gdsImg:'https://www.woego.cn/woego/image/622aaf5a75e50b69f7a2b40d_140x140!.jpg',
		gdsName:'Apple iPhone 13 Pro Max',
		agentPrice:530000,
		guidePrice:580000,
		saleAmount:599,
	},
	{
		gdsId:'1227867',
		gdsImg:'https://www.woego.cn/woego/image/622aaf5a75e50b69f7a2b40d_140x140!.jpg',
		gdsName:'Apple iPhone 13 Pro Max',
		agentPrice:530000,
		guidePrice:580000,
		saleAmount:599,
	},
	{
		gdsId:'1227867',
		gdsImg:'https://www.woego.cn/woego/image/622aaf5a75e50b69f7a2b40d_140x140!.jpg',
		gdsName:'Apple iPhone 13 Pro Max',
		agentPrice:530000,
		guidePrice:580000,
		saleAmount:599,
	},
	{
		gdsId:'1254266',
		gdsImg:'https:www.woego.cn/woego/image/6449d39e2b608d0a734b9585_140x140!.jpg',
		gdsName:'小象智能家庭医生 小象智能家庭医生',
		agentPrice:43000,
		guidePrice:48000,
		saleAmount:599,
	},
	{
		gdsId:'1254266',
		gdsImg:'https:www.woego.cn/woego/image/6449d39e2b608d0a734b9585_140x140!.jpg',
		gdsName:'小象智能家庭医生',
		agentPrice:43000,
		guidePrice:48000,
		saleAmount:599,
	},
	{
		gdsId:'1254266',
		gdsImg:'https:www.woego.cn/woego/image/6449d39e2b608d0a734b9585_140x140!.jpg',
		gdsName:'小象智能家庭医生',
		agentPrice:43000,
		guidePrice:48000,
		saleAmount:599,
	},
	{
		gdsId:'1254266',
		gdsImg:'https:www.woego.cn/woego/image/6449d39e2b608d0a734b9585_140x140!.jpg',
		gdsName:'小象智能家庭医生 小象智能家庭医生小象智能家庭医生',
		agentPrice:43000,
		guidePrice:48000,
		saleAmount:599,
	},
	{
		gdsId:'1254266',
		gdsImg:'https:www.woego.cn/woego/image/6449d39e2b608d0a734b9585_140x140!.jpg',
		gdsName:'小象智能家庭医生',
		agentPrice:43000,
		guidePrice:48000,
		saleAmount:599,
	},
])
topSale3MonthList.value=([
	{
		gdsId:'1227867',
		gdsImg:'https://www.woego.cn/woego/image/622aaf5a75e50b69f7a2b40d_140x140!.jpg',
		gdsName:'Apple iPhone 13 Pro Max',
		agentPrice:530000,
		guidePrice:580000,
		saleAmount:599,
	},
	{
		gdsId:'1227867',
		gdsImg:'https://www.woego.cn/woego/image/622aaf5a75e50b69f7a2b40d_140x140!.jpg',
		gdsName:'Apple iPhone 13 Pro Max',
		agentPrice:530000,
		guidePrice:580000,
		saleAmount:599,
	},
	{
		gdsId:'1227867',
		gdsImg:'https://www.woego.cn/woego/image/622aaf5a75e50b69f7a2b40d_140x140!.jpg',
		gdsName:'Apple iPhone 13 Pro Max',
		agentPrice:530000,
		guidePrice:580000,
		saleAmount:599,
	},
	{
		gdsId:'1227867',
		gdsImg:'https://www.woego.cn/woego/image/622aaf5a75e50b69f7a2b40d_140x140!.jpg',
		gdsName:'Apple iPhone 13 Pro Max',
		agentPrice:530000,
		guidePrice:580000,
		saleAmount:599,
	},
	{
		gdsId:'1227867',
		gdsImg:'https://www.woego.cn/woego/image/622aaf5a75e50b69f7a2b40d_140x140!.jpg',
		gdsName:'Apple iPhone 13 Pro Max',
		agentPrice:530000,
		guidePrice:580000,
		saleAmount:599,
	},
	{
		gdsId:'1254266',
		gdsImg:'https:www.woego.cn/woego/image/6449d39e2b608d0a734b9585_140x140!.jpg',
		gdsName:'小象智能家庭医生 小象智能家庭医生',
		agentPrice:43000,
		guidePrice:48000,
		saleAmount:599,
	},
	{
		gdsId:'1254266',
		gdsImg:'https:www.woego.cn/woego/image/6449d39e2b608d0a734b9585_140x140!.jpg',
		gdsName:'小象智能家庭医生',
		agentPrice:43000,
		guidePrice:48000,
		saleAmount:599,
	},
	{
		gdsId:'1254266',
		gdsImg:'https:www.woego.cn/woego/image/6449d39e2b608d0a734b9585_140x140!.jpg',
		gdsName:'小象智能家庭医生',
		agentPrice:43000,
		guidePrice:48000,
		saleAmount:599,
	},
	{
		gdsId:'1254266',
		gdsImg:'https:www.woego.cn/woego/image/6449d39e2b608d0a734b9585_140x140!.jpg',
		gdsName:'小象智能家庭医生 小象智能家庭医生小象智能家庭医生',
		agentPrice:43000,
		guidePrice:48000,
		saleAmount:599,
	},
	{
		gdsId:'1254266',
		gdsImg:'https:www.woego.cn/woego/image/6449d39e2b608d0a734b9585_140x140!.jpg',
		gdsName:'小象智能家庭医生',
		agentPrice:43000,
		guidePrice:48000,
		saleAmount:599,
	},
])

//methods
//查询排序类型切换
const onSelectType=(action:any)=>{
	saleTypeText.value=action.text
	saleType.value=action.key
	reload()
}
const onSelectSaleBrand=(json:any)=>{
	saleBrandText.value=json.label as string
	saleBrand.value=json.value||''
}
const resetSaleBrand=()=>{
	saleBrandText.value='全部品牌'
	saleBrand.value=''
}
const reload=()=>{
	//todo: 触发重新查询，清空原有的呈现，isloading=true
}
</script>